<template>
  <div class="comright flexC">
    <div class="category flex1 flexC">
      <div class="flex JustifyContentSB">
        <p class="font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt=""/>协同监管
        </p>
        <div class="flex flex1 JustifyContentFE">
          <p class="font_s16 Bold subtitle textC cursor" @click="lifeCicle = true">监管周期</p>
        </div>
      </div>
      <div class="flex1 flexC textC">
        <ul class="flex1 flex">
          <li class="flex1 cursor" @click="notCooperated = true">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">83</p>
            <p class="Medium font_s16 colorF">未协同数</p>
          </li>
          <li class="flex1 cursor" @click="peopleLeadNumber = true">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">3354</p>
            <p class="Medium font_s16 colorF">民政牵头数</p>
          </li>
          <li class="flex1 cursor" @click="othersCooperated = true">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">3271</p>
            <p class="Medium font_s16 colorF">其他单位<br />已协同
            </p>
          </li>
        </ul>
        <ul class="flex1 flex">
          <li class="flex1 cursor" @click="otherLeadNumber = true">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">1</p>
            <p class="Medium font_s16 colorF">其他单位<br />牵头数
            </p>
          </li>
          <li class="flex1 cursor"  @click="peopleCooperatedNumber = true">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">1</p>
            <p class="Medium font_s16 colorF">民政协同数</p>
          </li>
          <li class="flex1 cursor" @click="notCooperated02 = true">
            <p class="font_s20 Bold square LH3_5R" style="color: #A7FFFD;">0</p>
            <p class="Medium font_s16 colorF">未协同数</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="category flex1">
      <div class="flex JustifyContentSB">
        <p class="font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />监管要素
        </p>
        <div class="flex flex1 JustifyContentFE">
          <p class="font_s16 Bold subtitle textC cursor" @click="executeProgress = true" style="margin-right:0.5125rem;">执法流程</p>
          <p class="font_s16 Bold subtitle textC cursor" @click="intelligentDiscovery = true">智能发现</p>
        </div>
      </div>
      <p class="flex colorF Bold font_s18 JustifyContentSB bar cursor" @click="certificateOverdue = true">
        <span>证书已过期</span>
        <span>{{ creditForm.gyxy8 }}</span>
      </p>
      <p class="flex colorF Bold font_s18 JustifyContentSB bar1 cursor" @click="letterPublicSentiment = true">
        <span>信访舆情</span>
        <span>{{ creditForm.gyxy2 }}</span>
      </p>
      <p class="flex colorF Bold font_s18 JustifyContentSB bar cursor" @click="violationsOfSocialOrganizations = true">
        <span>社会组织违规情况</span>
        <span>{{ creditForm.gyxy3 }}</span>
      </p>
      <p class="flex colorF Bold font_s18 JustifyContentSB bar1 cursor" @click="illegalSocialOrganizations = true">
        <span>非法社会组织举报</span>
        <span>{{ creditForm.gyxy4 }}</span>
      </p>
      <p class="flex colorF Bold font_s18 JustifyContentSB bar cursor" @click="inspectAnnuallyFailed = true">
        <span>年检不合格</span>
        <span>{{ creditForm.gyxy14 }}</span>
      </p>
    </div>
    <!-- 组件调用 -->
    <ModalPolygon v-if="notCooperated" @hidden="hiddenPolygon(notCooperated)" title="未协同数">
      <NotCooperated></NotCooperated>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="othersCooperated" @hidden="hiddenPolygon(othersCooperated)" title="其他单位已协同">
      <OthersCooperated></OthersCooperated>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="otherLeadNumber" @hidden="hiddenPolygon(otherLeadNumber)" title="其他单位牵头数">
      <OtherLeadNumber></OtherLeadNumber>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="peopleCooperatedNumber" @hidden="hiddenPolygon(peopleCooperatedNumber)" title="民政协同数">
      <PeopleCooperatedNumber></PeopleCooperatedNumber>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="peopleLeadNumber" @hidden="hiddenPolygon(peopleLeadNumber)" title="民政牵头数">
      <PeopleLeadNumber></PeopleLeadNumber>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="notCooperated02" @hidden="hiddenPolygon(notCooperated02)" title="未协同数（下）">
      <NotCooperated02></NotCooperated02>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="executeProgress" @hidden="hiddenPolygon(executeProgress)" title="执法流程">
      <ExecuteProgress></ExecuteProgress>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="certificateOverdue" @hidden="hiddenPolygon(certificateOverdue)" title="社团证书已过期">
      <CertificateOverdue></CertificateOverdue>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="letterPublicSentiment" @hidden="hiddenPolygon(letterPublicSentiment)" title="信访舆情">
      <LetterPublicSentiment></LetterPublicSentiment>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="violationsOfSocialOrganizations" @hidden="hiddenPolygon(violationsOfSocialOrganizations)" title="社会组织违规情况">
      <ViolationsOfSocialOrganizations></ViolationsOfSocialOrganizations>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="illegalSocialOrganizations" @hidden="hiddenPolygon(illegalSocialOrganizations)" title="非法社会组织举报">
      <IllegalSocialOrganizations></IllegalSocialOrganizations>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalPolygon v-if="inspectAnnuallyFailed" @hidden="hiddenPolygon(inspectAnnuallyFailed)" title="年检不及格">
      <InspectAnnuallyFailed></InspectAnnuallyFailed>
      <!-- <Pagination :total="total"></Pagination> -->
    </ModalPolygon>
    <ModalRectangle v-if="intelligentDiscovery" @hidden="hiddenModalRect(intelligentDiscovery)" title="智能发现">
      <div class="flex JustifyContentC AlignItemsC" style="width: 92%; height: 90%; margin: 0 auto;">
        <img src="../../assets/img/comprehensive/left/29.png" alt="" style="width: 90%; height: 90%;" />
      </div>
    </ModalRectangle>
    <!-- 监管周期组件 -->
    <Modal v-if="lifeCicle" @hidden="hiddenModal">
      <div class="bj4 flexC AlignItemsC">
        <p class="colorF Bold font_s40" style="padding:1rem 20rem; border-bottom: beige 0.1rem solid;margin-bottom: 2.825rem;">监管生命周期</p>
        <img style="" src="../../assets/img/organization/22.png" alt="" />
      </div>
    </Modal>
  </div>
</template>
<script>
import Modal from '@/components/Modal.vue'
import ModalPolygon from '@/components/ModalPolygon.vue'
import ModalRectangle from '@/components/ModalRectangle.vue'
import NotCooperated from './right/NotCooperated.vue'
import OthersCooperated from './right/OthersCooperated.vue'
import OtherLeadNumber from './right/OtherLeadNumber.vue'
import PeopleCooperatedNumber from './right/PeopleCooperatedNumber.vue'
import PeopleLeadNumber from './right/PeopleLeadNumber.vue'
import NotCooperated02 from './right/NotCooperated02.vue'
import ExecuteProgress from './right/ExecuteProgress.vue'
import CertificateOverdue from './right/CertificateOverdue.vue'
import LetterPublicSentiment from './right/LetterPublicSentiment.vue'
import ViolationsOfSocialOrganizations from './right/ViolationsOfSocialOrganizations.vue'
import IllegalSocialOrganizations from './right/IllegalSocialOrganizations.vue'
import InspectAnnuallyFailed from './right/InspectAnnuallyFailed.vue'

export default {
  name: 'ComRight',
  components: {
    Modal,
    ModalPolygon,
    NotCooperated,
    OthersCooperated,
    OtherLeadNumber,
    PeopleCooperatedNumber,
    PeopleLeadNumber,
    NotCooperated02,
    ExecuteProgress,
    CertificateOverdue,
    LetterPublicSentiment,
    ViolationsOfSocialOrganizations,
    IllegalSocialOrganizations,
    InspectAnnuallyFailed,
    ModalRectangle
  },
  data () {
    return {
      total: 150,
      notCooperated: false,
      othersCooperated: false,
      otherLeadNumber: false,
      peopleCooperatedNumber: false,
      peopleLeadNumber: false,
      notCooperated02: false,
      letterPublicSentiment: false,
      violationsOfSocialOrganizations: false,
      illegalSocialOrganizations: false,
      certificateOverdue: false,
      lifeCicle: false,
      inspectAnnuallyFailed: false,
      capacitymodel: false,
      executeProgress: false,
      intelligentDiscovery: false,
      creditForm: {
        gyxy1: 0,
        gyxy2: 0,
        gyxy3: 0,
        gyxy4: 0,
        gyxy5: 0,
        gyxy6: 0,
        gyxy7: 0,
        gyxy8: 0,
        gyxy9: 0,
        gyxy10: 0,
        gyxy11: 0,
        gyxy12: 0,
        gyxy13: 0,
        gyxy14: 0
      }
    }
  },
  methods: {
    hiddenPolygon (choose) {
      if (this.notCooperated === choose) {
        this.notCooperated = false
      }
      if (this.othersCooperated === choose) {
        this.othersCooperated = false
      }
      if (this.otherLeadNumber === choose) {
        this.otherLeadNumber = false
      }
      if (this.peopleCooperatedNumber === choose) {
        this.peopleCooperatedNumber = false
      }
      if (this.peopleLeadNumber === choose) {
        this.peopleLeadNumber = false
      }
      if (this.notCooperated02 === choose) {
        this.notCooperated02 = false
      }
      if (this.executeProgress === choose) {
        this.executeProgress = false
      }
      if (this.certificateOverdue === choose) {
        this.certificateOverdue = false
      }
      if (this.letterPublicSentiment === choose) {
        this.letterPublicSentiment = false
      }
      if (this.violationsOfSocialOrganizations === choose) {
        this.violationsOfSocialOrganizations = false
      }
      if (this.illegalSocialOrganizations === choose) {
        this.illegalSocialOrganizations = false
      }
      if (this.inspectAnnuallyFailed === choose) {
        this.inspectAnnuallyFailed = false
      }
    },
    hiddenModalRect (choose) {
      if (this.intelligentDiscovery === choose) {
        this.intelligentDiscovery = false
      }
    },
    hiddenModal () {
      this.lifeCicle = false
    }
  },
  mounted () {
    setInterval(() => {
      this.creditForm.gyxy1 = 0
      this.creditForm.gyxy2 = 0
      this.creditForm.gyxy3 = 0
      this.creditForm.gyxy4 = 0
      this.creditForm.gyxy5 = 0
      this.creditForm.gyxy6 = 0
      this.creditForm.gyxy7 = 0
      this.creditForm.gyxy8 = 0
      this.creditForm.gyxy9 = 0
      this.creditForm.gyxy10 = 0
      this.creditForm.gyxy11 = 0
      this.creditForm.gyxy13 = 0
      this.creditForm.gyxy14 = 0

      var creditInterval1 = null
      var creditInterval2 = null
      var creditInterval3 = null
      var creditInterval4 = null
      var creditInterval5 = null
      var creditInterval6 = null
      var creditInterval7 = null
      var creditInterval8 = null
      var creditInterval9 = null
      var creditInterval10 = null
      var creditInterval11 = null
      var creditInterval12 = null
      var creditInterval13 = null
      var creditInterval14 = null

      creditInterval1 = setInterval(() => {
        if (this.creditForm.gyxy1 >= 4) {
          this.creditForm.gyxy1 = 4
          clearInterval(creditInterval1)
        } else {
          this.creditForm.gyxy1 = parseInt(this.creditForm.gyxy1 + Math.ceil(4 / 10))
        }
      }, 100)

      creditInterval2 = setInterval(() => {
        if (this.creditForm.gyxy2 >= 14) {
          this.creditForm.gyxy2 = 14
          clearInterval(creditInterval2)
        } else {
          this.creditForm.gyxy2 = parseInt(this.creditForm.gyxy2 + Math.ceil(14 / 10))
        }
      }, 100)
      creditInterval3 = setInterval(() => {
        if (this.creditForm.gyxy3 >= 1) {
          this.creditForm.gyxy3 = 1
          clearInterval(creditInterval3)
        } else {
          this.creditForm.gyxy3 = parseInt(this.creditForm.gyxy3 + Math.ceil(1 / 10))
        }
      }, 100)
      creditInterval4 = setInterval(() => {
        if (this.creditForm.gyxy4 >= 2) {
          this.creditForm.gyxy4 = 2
          clearInterval(creditInterval4)
        } else {
          this.creditForm.gyxy4 = parseInt(this.creditForm.gyxy4 + Math.ceil(2 / 10))
        }
      }, 100)

      creditInterval5 = setInterval(() => {
        if (this.creditForm.gyxy5 >= 8) {
          this.creditForm.gyxy5 = 8
          clearInterval(creditInterval5)
        } else {
          this.creditForm.gyxy5 = parseInt(this.creditForm.gyxy5 + Math.ceil(8 / 10))
        }
      }, 100)
      creditInterval6 = setInterval(() => {
        if (this.creditForm.gyxy6 >= 25) {
          this.creditForm.gyxy6 = 25
          clearInterval(creditInterval6)
        } else {
          this.creditForm.gyxy6 = parseInt(this.creditForm.gyxy6 + Math.ceil(25 / 10))
        }
      }, 100)
      creditInterval7 = setInterval(() => {
        if (this.creditForm.gyxy7 >= 13) {
          this.creditForm.gyxy7 = 13
          clearInterval(creditInterval7)
        } else {
          this.creditForm.gyxy7 = parseInt(this.creditForm.gyxy7 + Math.ceil(13 / 10))
        }
      }, 100)
      creditInterval8 = setInterval(() => {
        if (this.creditForm.gyxy8 >= 479) {
          this.creditForm.gyxy8 = 479
          clearInterval(creditInterval8)
        } else {
          this.creditForm.gyxy8 = parseInt(this.creditForm.gyxy8 + Math.ceil(497 / 10))
        }
      }, 100)
      creditInterval9 = setInterval(() => {
        if (this.creditForm.gyxy9 >= 113) {
          this.creditForm.gyxy9 = 113
          clearInterval(creditInterval9)
        } else {
          this.creditForm.gyxy9 = parseInt(this.creditForm.gyxy9 + Math.ceil(113 / 10))
        }
      }, 100)

      creditInterval10 = setInterval(() => {
        if (this.creditForm.gyxy10 >= 231) {
          this.creditForm.gyxy10 = 231
          clearInterval(creditInterval10)
        } else {
          this.creditForm.gyxy10 = parseInt(this.creditForm.gyxy10 + Math.ceil(231 / 10))
        }
      }, 100)

      creditInterval11 = setInterval(() => {
        if (this.creditForm.gyxy11 >= 368) {
          this.creditForm.gyxy11 = 368
          clearInterval(creditInterval11)
        } else {
          this.creditForm.gyxy11 = parseInt(this.creditForm.gyxy11 + Math.ceil(368 / 10))
        }
      }, 100)

      creditInterval12 = setInterval(() => {
        if (this.creditForm.gyxy12 >= 0) {
          this.creditForm.gyxy12 = 0
          clearInterval(creditInterval12)
        } else {
          this.creditForm.gyxy12 = parseInt(this.creditForm.gyxy12 + Math.ceil(0 / 10))
        }
      }, 100)

      creditInterval13 = setInterval(() => {
        if (this.creditForm.gyxy13 >= 4) {
          this.creditForm.gyxy13 = 4
          clearInterval(creditInterval13)
        } else {
          this.creditForm.gyxy13 = parseInt(this.creditForm.gyxy13 + Math.ceil(4 / 10))
        }
      }, 100)
      creditInterval14 = setInterval(() => {
        if (this.creditForm.gyxy14 >= 360) {
          this.creditForm.gyxy14 = 360
          clearInterval(creditInterval14)
        } else {
          this.creditForm.gyxy14 = parseInt(this.creditForm.gyxy14 + Math.ceil(360 / 10))
        }
      }, 100)
    }, 5000)
  }
}
</script>
<style lang="scss" scoped>
.comright{
  position: absolute;
  top: 15%;
  right:1rem;
  height: 50%;
  width: 20%;
  .category{
    padding:0.5rem 1.5rem;
    background: url(../../assets/img/comprehensive/20.png) no-repeat;
    background-size: 100% 100%;
    .subtitle {
      color:#84BBFF;
      line-height: 1.5625rem;
      width: 4.75rem;
      height: 1.5625rem;
      border: 1px solid #5aa1f8;
      border-radius: 13px;
    }
    .square{
      background: url(../../assets/img/comprehensive/21.png) no-repeat;
      background-size: 100% 100%;
    }
    .bar,.bar1{
      margin: 1rem 0;
      padding: 0 1rem;
      line-height: 1.875rem;

    }
    .bar{
      background: #1854d1;
    }
    .bar1{
      background::#2a509f
    }
  }
  .bj {
    width: 95%;
    height: 95%;
    position: absolute;
    top: 5%;
 left: 2%;
  }
  .bj3 {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }
  .bj4{
   position: absolute;
   top: 15%;
   left: 25%;
   width: 50%;
   height: 50%;
   background-image: url('../../assets/img/comprehensive/components/bg_popout.png');
   background-size: 100% 100%;
   img{
     width: 75%;
   }
  }
}
</style>
